<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.js"></script>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <style>
        ul{
            list-style: none;
        }
        h2,h3,h4{
            cursor:pointer; display:inline-block;
        }
    </style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="country in cityData">
            <div>
                <input type="checkbox" ng-model="country.checked" ng-change="checkAll(country)">
                <h2 ng-click="isShow = !isShow">
                    <span ng-class="isShow ? 'fa fa-plus' : 'fa fa-minus'"></span>
                    {{country.label}}
                </h2>
            </div>
            <ul ng-show="!isShow">
                <li ng-repeat="province in country.provinces">
                    <div>
                        <input type="checkbox" ng-model="province.checked">
                        <h3 ng-click="isOpen = !isOpen">
                            <span ng-class="isOpen ? 'fa fa-plus' : 'fa fa-minus' "></span>
                            {{province.label}}
                        </h3>
                    </div>
                    <ul ng-show="!isOpen">
                        <li ng-repeat="city in province.cities">
                            <div>
                                <input type="checkbox" ng-model="city.checked">
                                <h4> {{city.label}} </h4>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script>
    var app = angular.module('myApp', [])
    app.controller('myCtrl', function($scope, CityData){
//        console.log(CityData)
        $scope.cityData = CityData
        $scope.isShow = false
        $scope.isOpen = false

//        解决全选，当国家被选中的时候，旗下所有的省份城市都被选中
        $scope.checkAll = function(country){
//            console.log(country)
//  forEach()遍历循环，类似map()，
//            para1:要遍历/处理的对象， para2:回调函数， 内部参数：每个对象元素
            angular.forEach(country.provinces, function(province){
//                console.log(province)
                province.checked = country.checked
            })
        }
    })

    app.factory('CityData', function(){
        var datas = [
            {
                label: '中国',
                flag: 'cn.png',
                provinces: [
                    {
                        label: '北京',
                        cities: [
                            {
                                label: '朝阳区'
                            },
                            {
                                label: '宣武区'
                            },
                            {
                                label: '海淀区'
                            }
                        ]
                    },
                    {
                        label: '河北',
                        cities: [
                            {
                                label: '石家庄'
                            },
                            {
                                label: '承德'
                            },
                            {
                                label: '唐山'
                            }
                        ]
                    }
                ]
            },
            {
                label: '美国',
                flag: 'us.png',
                provinces: [
                    {
                        label: '纽约',
                        cities: [
                            {
                                label: '曼哈顿区'
                            },
                            {
                                label: '皇后区'
                            }
                        ]
                    },
                    {
                        label: '德克萨斯州',
                        cities: [
                            {
                                label: '休斯顿'
                            },
                            {
                                label: '达拉斯'
                            }
                        ]
                    },
                    {
                        label: '加利福尼亚州'
                    }
                ]
            }
        ]
        return datas
    })
</script>
</html>